<template>
  <div class="footer bgc-212f flex flex-column flex-between">
    <div class="foot-warp w-1160 flex flex-between psr">
      <div class="foot-qr psr text-center">
        <div class="qr-tel flex flex-between">
          <img
            src="@/assets/img/Online-Service.png"
            width="43"
            height="43"
            alt="!"
          />
          <div>
            <p class="c-fff fz22">400-096-0828</p>
            <p class="c-d2 fz14">7*24小时客服为您服务</p>
          </div>
        </div>
        <div class="qr-img flex flex-column flex-between">
          <img src="@/assets/img/cq-qr.png" width="159" height="159" alt="!" />
          <p>微信扫描二维码，关注【橙券】</p>
        </div>
      </div>
      <div class="foot-contact flex">
        <dl >
          <dt>橙品牌</dt>
          <dd>橙营销</dd>
          <dd>橙积分</dd>
          <dd>橙金融</dd>
          <dd>橙福利</dd>
        </dl>
        <dl>
          <dt>快速入口</dt>
          <dd>权益平台</dd>
          <dd>开放平台</dd>
          <dd><a href="suppliers.html">供应商入驻</a></dd>
        </dl>
        <dl>
          <dt>网站链接</dt>
          <dd><a href="index.html">首页</a></dd>
          <dd>橙权益</dd>
          <dd>行业案例</dd>
          <dd>新闻动态</dd>
          <dd>关于我们</dd>
        </dl>
        <dl>
          <dt>友情链接</dt>
          <dd>Decent鼎信</dd>
          <dd>中国银联</dd>
          <dd>中国农业银行</dd>
          <dd>中国移动</dd>
          <dd>中国联通</dd>
        </dl>
      </div>
    </div>
    <div class="record w-1160 fz14 flex flex-center">
      <p>
        &copy;2019&nbsp;&nbsp;&nbsp;山东鼎信网络科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;鲁ICP备13023321号-25
      </p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'cq-footer'
}
</script>
<style lang="scss" scoped>
.foot-warp:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -110px;
  width: 1442px;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.1),
    #4c4f5f,
    rgba(0, 0, 0, 0.1)
  );
}
.foot-qr {
  box-sizing: border-box;
  margin-top: 55px;
  padding: 0 84px 0 65px;
}

.foot-qr:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 2px;
  width: 1px;
  height: 244px;
  background-color: #4c4f5f;
}
.qr-tel {
  line-height: 22px;
  width: 198px;
}
.qr-img {
  margin-left: 22px;
}
.qr-img img {
  padding: 16px 0 15px 0;
}
.qr-img p {
  line-height: 13px;
  color: #cecece;
  font-size: 12px;
}
.record {
  line-height: 60px;
  color: #7e8088;
}
.qr-tel div {
  margin-top: 3px;
}
.qr-tel div p:first-of-type {
  margin-bottom: 4px;
}
/* ===== footer  foot-contact  start */
.foot-contact {
  padding-top: 79px;
  padding-left: 16px;
  width: 804px;
}
.foot-contact dl {
  margin: 0 64px;
}
.foot-contact dl dt {
  margin-bottom: 38px;
  line-height: 16px;
  color: #fff;
  font-size: 16px;
}
.foot-contact dl dd {
  margin-bottom: 18px;
  line-height: 14px;
  color: #cecece;
  font-size: 14px;
  cursor: pointer;
}
.foot-contact dd a {
  color: #cecece;
}
.foot-contact dd a:hover {
  color: #fff;
}
/* ======== footer satrt =========  */
.foot-warp {
  padding-bottom: 20px;
}

.foot-contact dl dd:hover{
  color: orange;
}

.foot-contact dt:hover{
  color: orange;
}
</style>
